<!--
 * @description 轮播组件-左右留白轮播2
 * @author dumeng
 * @date 2022/11/25
 -->
<template>
  <div
    :id="isInitData ? option.id :'swiper4page' "
    class="swiper4page"
    :style="{'margin-top': top, 'height': imgHeight}"
  >
    <div class="swiper" :style="{'height': imgHeight}">
      <div class="swiper-wrapper">
        <div v-for="item in list" :id="item.id" :key="item.id" class="swiper-slide">
          <img
            :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))"
            :style="{'object-fit': imgType, 'height': imgHeight}"
            alt=""
          >
        </div>
      </div>
      <div v-show="indicators" class="swiper-pagination" />
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
import Swiper from 'swiper/swiper-bundle.min.js'
import 'swiper/swiper-bundle.min.css'
import { v4 as uuidv4 } from 'uuid'
import bannerMixins from '@/components/CustomPage/apps/widget/banner/mixins'

export default {
  name: 'Swiper4page',
  mixins: [mixins, bannerMixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4()
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4()
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4()
        },
        {
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4()
        }
      ],
      pageSize: ''
    }
  },
  computed: {

    // 图片高度
    imgHeight() {
      return this.px2rem(this.option.imgHeight || 340)
    }
  },
  async mounted() {
    this.pageSize = this.option.number
    if (this.isInitData) {
      await this.initData()
    } else {
      this.initSwiper()
    }
  },
  methods: {
    setData(result) {
      if (this.option.dataorigin === '1') {
        this.list = result?.dataList?.data || []
      } else {
        this.list = result.swiper4page?.data?.rows || []
      }
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
    initSwiper() {
      const ths = this
      const options = {
        spaceBetween: '6%',
        autoplay: {
          delay: ths.isAutoPlay ? ths.delayTime : 0
        },
        loop: ths.loop,
        observer: true,
        observeParents: true,
        effect: 'coverflow',
        centeredSlides: true,
        slidesPerView: 'auto',
        initialSlide: 1,
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false
        },
        pagination: {
          el: ' .swiper-pagination',
          clickable: false
        },
        on: {
          click: function(e) {
            // 后台管理不能跳转
            return
          }
        }
      }

      if (!ths.isAutoPlay) {
        options['autoplay'] = false
      }
      this.swiper = new Swiper(this.isInitData ? `#${this.option.id} .swiper` : '#swiper4page .swiper', options)
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

.swiper4page {
  width: rem(750);

  .swiper {
    width: 100%;
    height: rem(294);
  }

  .swiper .swiper-wrapper {
    height: 100%;

    .swiper-slide {
      width: rem(646);
      border-radius: rem(16);

      img {
        width: 100%;
        height: 100%;
        border-radius: rem(16);
        background-color: #999;
      }
    }

    .swiper-slide-prev, .swiper-slide-next {
      height: 100% !important;

      img {
        height: 100% !important;
      }
    }

    .swiper-slide-active {
      width: rem(646) !important;
      height: 100% !important;
    }
  }

  .swiper-pagination-bullet {
    height: 4px;
    width: rem(20);
    border-radius: 4px;

    &.swiper-pagination-bullet-active {
      width: rem(20);
      height: 4px;
      border-radius: 4px;
      @include bg-color($mainColor);
    }
  }
}
</style>
